
// 引入底部导航栏 样式 还有所有css
require("../../assets/css/index.less")
const renderNav = require("../../lib/bottom_nav")
require("./home.less")

// swiper引入，路径看node_module里面
require("swiper/dist/css/swiper.min.css")
const mySwiper = require("swiper")

// 引入axios 工具函数
const request = require("../../lib/requst")
function $(select){
    return document.querySelector(select)
}

window.onload = ()=>{
    let mySwiper = new Swiper ('.swiper', {
        // 左右互通
        loop: true,
        
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 用户操作后任然能继续自动滚动
        autoplayDisableOnInteraction : false,
        // 自动滚动 2s
        autoplay:2000,
        
      })


    function render2(){
        request.get("/api/user/info").then(res=>{
            console.log(res.data)
            if(res.data.errno ===0){
              $(".p_9").textContent = res.data.data.ranking
              $(".clock_num").textContent = `累计打卡${res.data.data.clockCount}天`
              $(".b_num").textContent = res.data.data.badges
          }
        })
    }
    // 渲染页面数据，除开打开按钮
    render2();
      function render(){
        request.get("/api/user/clockInInfo").then(res=>{
            if(res.data.data.isClockIn){
                $(".clock_bt").textContent = "已打卡";
                $(".clock_bt").className = "clocked";
            }else{
                $(".clock_bt").textContent = "今日打卡";
                $(".clock_bt").className = "clock_bt";
            }
        })
      }
    //  进入页面先渲染是否打卡，打卡按钮
      render();
      $(".clock_bt").addEventListener("click",function(){
        request.post("/api/user/clockIn").then(res=>{
             if(res.data.errno===0){
                 //打完卡后，渲染打卡按钮
               render();
               //打完卡后渲染，其他数据
               render2();
             }else{
                 alert(res.data.message)
             }
        })
      })

      //渲染底部导航栏
      renderNav("home");

}
